<template>
    <div class="OTBody wap">
      <div class="fixedHead">
        <x-header v-if="!this.$fromApp(this)" class="whiteTheme" :left-options="{backText: ''}">订单跟踪</x-header>
        <div class="orderNumBox display-flex flex-direction-row align-items-center justify-content-flex-justify">
          <div class="orderNum display-flex flex-direction-row">
            <span>销售订单编号：</span>
            <p>{{orderNo}}</p>
          </div>
          <div class="copyBtn" @click="copyOrderNo">
            <p class=" display-flex flex-direction-row align-items-center justify-content-flex-center"><span>复制单号</span></p>
          </div>
        </div>
      </div>

      <div class="orderTrackContent main" :style="{marginTop:marginTopApp}">
        <scroller>
          <timeline>
            <timeline-item v-for="(item,index) in trackData" :key="index">
              <h4 class="recent">{{item.message}}</h4>
              <p class="recent">{{item.creTime}}</p>
            </timeline-item>
          </timeline>
        </scroller>

      </div>
    </div>
</template>

<script>
    import { Timeline, TimelineItem } from 'vux';
    export default {
        name: "orderTrack",
        components:{
          Timeline,
          TimelineItem
        },
        data(){
          return{
            saleOrderId:'',
            orderNo:'',
            trackData:[],
            marginTopApp:''
          }
        },
        mounted(){
          if(this.$fromApp(this)){
            this.marginTopApp = '1.2rem'
          }else{
            this.marginTopApp = '2.2rem'
          }
          this.saleOrderId = this.$route.query.saleOrderId;
          this.orderNo = this.$route.query.orderNo;
          this.getTrackFn();
        },
        methods:{
          getTrackFn(){
            this.$ajax.get('sale/state/trace',res=>{
              if(res.code == '200'){
                this.trackData = res.data.reverse();
              }else{
                this.$vux.toast.text(res.msg, 'center');
              }
            },{saleOrderId:this.saleOrderId})
          },
          copyOrderNo(){
            if(this.$fromApp(this)){
              this.$callJava({code:1005,orderNo:this.orderNo})
            }else{
              console.log(this.orderNo)
              const input = document.createElement('input');
              document.body.appendChild(input);
              input.setAttribute("value",this.orderNo);
              input.select();
              if(document.execCommand("copy")){
                document.execCommand("copy");
                this.$vux.toast.text('复制成功!');
              }
              document.body.removeChild(input);
            }
          }
        }
    }
</script>

<style lang="less" type="text/less" scoped>
.OTBody{
  .fixedHead{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #FFFFFF;
    z-index: 99999;
    .orderNumBox{
      border-top: 1px solid #EBEBEB;
      height: 1rem;
      .orderNum{
        margin-left: .3rem;
        span{
          color: #666666;
          font-size: 14px;
        }
        p{
          color: #222222;
          font-size: 14px;
          font-weight: bold;
        }
      }
      .copyBtn{
        margin-right: .3rem;
        p{
          color: #222222;
          font-size: 10px;
          width: 1.1rem;
          height: .4rem;
          text-align: center;
          line-height: .4rem;
          border-radius: .2rem;
          border: 1px solid #DDDDDD;
        }
      }
    }
  }
  .orderTrackContent{
    background-color: #FFFFFF;
    padding: .3rem .3rem;
  }

}
</style>
